<template>
  <div class="mobiellogin">
    <section>
      <div class="mobiellogin_hader">
        <div class="left"></div>
        <div class="right">
          <span>已有账号,</span>
          <span>
            <router-link to="/password">马上登录</router-link>
          </span>
        </div>
      </div>
      <div class="step">
        <div class="step_item">
          <img v-if="active == 0" src="@/assets/images/100@2x.png" />
          <img v-else src="@/assets/images/101@2x.png" />
          <span :style="{ color: active === 0 ? '#fff' : 'rgba(78,92,101,1)' }"
            >注册账户</span
          >
        </div>
        <div class="step_item">
          <img v-if="active == 1" src="@/assets/images/102@2x.png" />
          <img v-else src="@/assets/images/103@2x.png" />
          <span :style="{ color: active === 1 ? '#fff' : 'rgba(78,92,101,1)' }"
            >资料填写</span
          >
        </div>
        <div class="step_item">
          <img v-if="active == 2" src="@/assets/images/104.png" />
          <img v-else src="@/assets/images/105@2x.png" />
          <span :style="{ color: active === 2 ? '#fff' : 'rgba(78,92,101,1)' }"
            >提交审核</span
          >
        </div>
      </div>
      <div class="content">
        <div
          v-if="auditStatus === '0' || auditStatus === 'undefined'"
          class="phone"
          style="width: 4.32rem"
        >
          <div v-if="wxUserInfo.openid || true">
            <span>绑定手机号</span>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="demo-ruleForm"
            >
              <el-form-item prop="phone">
                <el-row
                  class="user"
                  type="flex"
                  align="middle"
                  justify="space-between"
                >
                  <el-input
                    style="width: 90%"
                    v-model.number="ruleForm.phone"
                    placeholder="请输入手机号"
                  ></el-input>
                  <div
                    v-if="ruleForm.phone"
                    class="clear"
                    @click="ruleForm.phone = ''"
                  ></div>
                </el-row>
              </el-form-item>
              <el-form-item prop="pass">
                <el-row class="user" type="flex" align="middle">
                  <el-input
                    type="password"
                    v-model="ruleForm.pass"
                    placeholder="设置8-20位密码"
                  ></el-input>
                  <div
                    v-if="ruleForm.pass"
                    class="clear"
                    @click="ruleForm.pass = ''"
                  ></div>
                </el-row>
              </el-form-item>
              <el-form-item prop="password">
                <el-row
                  class="password"
                  type="flex"
                  justify="space-between"
                  align="middle"
                >
                  <el-input
                    type="password"
                    style="width: 90%"
                    v-model="ruleForm.password"
                    placeholder="确认密码"
                  ></el-input>
                  <div
                    v-if="ruleForm.password"
                    class="clear"
                    @click="ruleForm.password = ''"
                  ></div>
                </el-row>
              </el-form-item>
              <el-form-item prop="code">
                <el-row
                  class="password"
                  type="flex"
                  justify="space-between"
                  align="middle"
                >
                  <el-input
                    style="width: 2.3rem"
                    v-model="ruleForm.code"
                    placeholder="请输入验证码"
                  ></el-input>
                  <div
                    v-if="ruleForm.code"
                    class="clear"
                    @click="ruleForm.code = ''"
                  ></div>
                  <div v-if="timer === 60" class="rcode" @click="handleCode">
                    获取验证码
                  </div>
                  <div v-else class="rcode">重新获取{{ timer }}}</div>
                </el-row>
              </el-form-item>
              <el-form-item>
                <div
                  :style="{ opacity: submitStaus }"
                  class="submit"
                  @click="submit('ruleForm')"
                >
                  下一步
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div v-else>
            <iframe
              ref="iframeRef"
              class="code-iframe"
              scrolling="no"
              :src="wxCode"
            >
            </iframe>
          </div>
        </div>
        <div v-if="auditStatus === '-1'" class="wecat">
          <step
            :businessId="businessId"
            @reload="(active = 2), (auditInfo.status = 1)"
          ></step>
        </div>
        <div v-if="auditStatus == '1' || auditStatus == '4'" class="success">
          <div class="top">
            <div class="examine">
              <img src="@/assets/images/组 3436@2x.png" alt />
              <p>提交审核</p>
              <span>{{ auditInfo.submitTime }}</span>
            </div>
            <div class="examine">
              <img
                v-if="auditInfo.status === 2"
                src="@/assets/images/组 3436@2x.png"
                alt
              />
              <img
                v-if="auditInfo.status === 1 || auditInfo.status === 4"
                style="width: 0.55rem; height: 0.55rem"
                src="@/assets/images/组 3437@2x.png"
                alt
              />
              <p>审核中</p>
              <span>{{ auditInfo.nowTime }}</span>
            </div>
            <div class="examine">
              <img
                style="width: 0.55rem; height: 0.55rem"
                v-if="auditInfo.status === 1"
                src="@/assets/images/组 3435@2x.png"
                alt
              />
              <img
                v-if="auditInfo.status === 2"
                style="width: 0.55rem; height: 0.55rem"
                src="@/assets/images/组 3386@2x.png"
                alt
              />
              <img
                v-if="auditInfo.status === 4"
                style="width: 0.55rem; height: 0.55rem"
                src="@/assets/images/组 3438@2x.png"
                alt
              />
              <p>{{ auditInfo.status === 4 ? "审核不通过" : "审核通过" }}</p>
              <span>{{ auditInfo.changeTime }}</span>
            </div>
            <div class="line-list">
              <div class="line"></div>
              <div class="block"></div>
              <div
                class="line2"
                :style="{ background: examineStatus || 'rgba(220,250,248,1)' }"
              ></div>
            </div>
          </div>
          <div class="success"></div>
          <div
            class="submit"
            v-if="auditInfo.status === 4"
            :style="{ opacity: 1 }"
            @click="againAudit"
          >
            重新提交审核
          </div>
          <div
            class="submit"
            v-if="auditInfo.status === 2"
            :style="{ opacity: 1 }"
            @click="$router.push('/login')"
          >
            返回登录
          </div>
          <div class="yy" v-if="auditInfo.status === 4">
            <span>审核不通过原因：</span>
            <span style="font-size: 0.18rem; font-weight: 600; color: #4e5c65">
              {{ auditInfo.result }}
            </span>
          </div>
        </div>
      </div>
    </section>
    <jblFooter />
  </div>
</template>

<script>
import md5 from "js-md5";
import { mapGetters } from "vuex";
import jblFooter from "@/views/login/compoents/jblFooter";
import step from "@/views/login/register/components/step2";
import { randomString } from "@/utils";
import { setToken, setAuditStatus } from "@/utils/auth";
import { selectOrgList, veryCode, selectAllList } from "@/api/common";
import {
  getRedirectUrl,
  getAccessToken,
  getUserInfo,
  wxBind,
  sendCode,
  phoneRegister,
} from "@/api/user";

export default {
  name: "Password",
  inject: ["reload"],
  components: {
    jblFooter,
    step,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      code: this.$route.query.code || "2",
      wxCode: "",
      examineStatus: false,
      active: null,
      userInfo: {},
      businessId: "",
      auditInfo: {
        businessId: "",
        status: 1,
        submitTime: null, // 提交时间
        nowTime: "请耐心等待", // 现在时间
        changeTime: null, // 审核结束时间
        result: "", // 不通过原因
      }, // 审核信息
      stepData: [
        {
          name: "注册账户",
          id: "0",
        },
        {
          name: "资料填写",
          id: "-1",
        },
        {
          name: "提交审核",
          id: "1",
        },
      ],
      timer: 60,
      ruleForm: {
        user: "",
        phone: "",
        code: "",
        pass: null,
        password: null,
      },
      rules: {
        user: [{ required: true, message: "请输入账号", trigger: "blur" }],
        phone: [{ validator: validatePhone, trigger: "change" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        pass: [
          { validator: validatePass, trigger: "blur" },
          {
            min: 8,
            max: 20,
            message: "长度在 8 到 20 个字符",
            trigger: "change",
          },
        ],
        password: [{ validator: validatePassword, trigger: "blur" }],
      },
    };
  },
  watch: {
    $route() {
      if (this.$route.query.code !== undefined) {
        // console.log(this.$route.query.code, this.$route.query.state, '///////')
      }
    },
    wxCode(url) {
      console.log(url, ".,.,......");
    },
  },
  computed: {
    ...mapGetters(["auditStatus", "wxUserInfo", "token"]),
    submitStaus() {
      return this.ruleForm.phone &&
        this.ruleForm.code &&
        this.ruleForm.pass &&
        this.ruleForm.password
        ? 1
        : 0.5;
    },
  },
  created() {
    if (this.token) {
      selectAllList().then((res) => {
        const data = res.data;
        data.forEach((i) => {
          if (!i.parentId) {
            this.auditInfo = {
              businessId: i.businessId,
              status: i.status,
              submitTime: this.$options.filters.parseTime(
                i.submitTime,
                "{y}-{m}-{d} {h}:{i}:{s}"
              ), // 提交时间
              nowTime: "请耐心等待", // 现在时间
              changeTime: this.$options.filters.parseTime(
                i.changeTime,
                "{y}-{m}-{d} {h}:{i}:{s}"
              ), // 审核结束时间
              result: i.result || "", // 不通过原
            };
          }
        });
      });
    }
  },
  mounted() {
    // this.login()
    switch (this.auditStatus) {
      case "0":
        this.active = 0;
        break;

      case "-1":
        this.active = 1;
        break;

      case "1":
        this.active = 2;
        break;

      case "4":
        this.active = 2;
        break;
    }
    // console.log(this.auditStatus, '///this.auditStatus')
    // this.active = this.auditStatus
    // this.$store.dispatch('user/wxLogin').then(res => {
    //   console.log(res)
    // })
  },
  beforeRouteLeave(to, form, next) {
    // this.isScanning = false
    next();
  },
  methods: {
    handleCode() {
      this.$refs["ruleForm"].validateField("phone", (err) => {
        if (err) {
          return false;
        } else {
          this.timer = 59;
          const time = setInterval(() => {
            this.timer--;
            if (this.timer <= 0) {
              clearInterval(time);
              this.timer = 60;
            }
          }, 1000);
          sendCode({
            phone: this.ruleForm.phone,
          }).then((res) => {
            this.$message({
              message: "验证码已发送",
              type: "success",
            });
          });
        }
      });
    },
    async login() {
      // await selectOrgList({ phone: this.ruleForm.phone }).then(res => {
      //   console.log(res, 'sssssssssss')
      // })
      // await getRedirectUrl().then(res => {
      //   this.wxCode = `${res.data}&self_redirect=false`
      //   console.log(location, this.$refs.iframeRef, 'this.$refs.iframeRef')
      // })
      // const { data } = await getAccessToken({ code: this.code })
      // const { data } = await getAccessToken({ code: '071lrTgl0DT2dq1n75gl078ehl0lrTgh' })
      // const { accessToken, openId } = data
      // const userInfo = await getUserInfo({
      //   'openId': openId,
      //   'accessToken': accessToken
      // })
      // this.userInfo = userInfo.data
      // console.log(userInfo, 'userInfo')
      // var obj = new WxLogin({
      //   self_redirect: true,
      //   id: 'login_container',
      //   appid: 'wxe911e0190045a775',
      //   scope: 'snsapi_login',
      //   redirect_uri: 'https%3A%2F%2Fapp.jiabala.com%2F%2Ftest%2Fapi%2Fmerchant%2Fv1%2FsysUser%2FgetAccessToken',
      //   state: randomString(13),
      //   success: function(res) {
      //     console.log(res, '3333333333')
      //   }
      // })
      // console.log(obj, ',,,,,,,,')
    },
    // 下一步
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          phoneRegister({
            phone: this.ruleForm.phone,
            code: this.ruleForm.code,
            password: md5(this.ruleForm.password),
          }).then((user) => {
            const { token } = user.data;
            TDAPP.onEvent("注册资料填写");
            setToken(token);
            setAuditStatus("-1");
            this.$store.commit("user/SET_TOKEN", token);
            this.$store.commit("user/SET_AUDITSTATUS", "-1");
            this.active = 1;
            this.$message({
              message: "绑定成功",
              type: "success",
            });
            // wxBind({
            //   'nickName': this.wxUserInfo.nickname,
            //   'phone': this.ruleForm.phone,
            //   'password': this.ruleForm.password,
            //   'avatar': this.wxUserInfo.headimgurl,
            //   'sex': this.wxUserInfo.sex,
            //   'unionId': this.wxUserInfo.unionid,
            //   'thirdAppId': 'wxe911e0190045a775',
            //   'bindType': '3',
            //   'identity': '2',
            //   'openId': this.wxUserInfo.openid
            // }).then(user => {
            //   const { token } = user.data
            //   setToken(token)
            //   setAuditStatus('-1')
            //   this.$store.commit('user/SET_AUDITSTATUS', '-1')
            //   this.active = 1
            //   this.$message({
            //     message: '绑定成功',
            //     type: 'success'
            //   })
            // })
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重新提交审核
    againAudit() {
      this.businessId = this.auditInfo.businessId;
      this.$store.commit("user/SET_AUDITSTATUS", "-1");
      // setAuditStatus('-1')
      this.$router.push("/register");
      // const { href } = this.$router.resolve({ path: '/register' })
      // window.open(href, '_blank')
    },
    toScanning() {
      this.isScanning = true;
    },
  },
  // 离开当前页面后执行
  destroyed: function () {
    this.$store.dispatch("user/removewxUserInfo");
  },
};
</script>
<style lang="scss" scoped>
.mobiellogin {
  width: 100%;
  min-width: 1000px;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  background: rgba(247, 248, 252, 1);
  opacity: 1;
  section {
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  &_hader {
    margin: 0.6rem 0 0.3rem;
    width: 12rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .left {
      width: 2.2rem;
      height: 0.54rem;
      background-image: url("../../../assets/images/jbllogo.png");
      background-size: 100% 100%;
      background-position: center;
    }
    .right {
      font-size: 0.18rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b3b9c7;
      opacity: 1;
      span:nth-of-type(2) {
        cursor: pointer;
        color: #41b3ff;
      }
      span:last-child {
        cursor: pointer;
      }
      span:nth-of-type(3) {
        margin: 0 0.3rem;
      }
    }
  }
  .step {
    display: flex;
    justify-content: space-between;
    &_item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 3.89rem;
      height: 1rem;
      font-size: 0.24rem;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 0.33rem;
      color: rgba(78, 92, 101, 1);
      > img {
        width: 3.89rem;
        height: 1rem;
      }
      > span {
        position: absolute;
      }
    }
  }
  .code-iframe {
    width: 300px;
    height: 400px;
    border: none;
    overflow-y: hidden;
  }
  .content {
    margin-top: 0.3rem;
    padding: 0.3rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12rem;
    min-width: 800px;
    // height:5.54rem;
    min-height: 5.5rem;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    border-radius: 10px;
    box-sizing: border-box;
    .wecat {
      .code {
        width: 2.2rem;
        height: 2.2rem;
        background-image: url("../../../assets/images/商户端PC端-登录账户-扫码@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }

      .title {
        width: 2.88rem;
        height: 0.69rem;
        text-align: center;
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 0.36rem;
        color: rgba(78, 92, 101, 1);
        opacity: 1;
      }
    }
    .phone {
      > div > span {
        margin: 0 0 0.3rem;
        display: block;
        text-align: center;
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 0.42rem;
        color: rgba(78, 92, 101, 1);
        opacity: 1;
      }
    }
    .user {
      width: 4.32rem;
      height: 0.7rem;
      background: rgba(247, 248, 252, 1);
      opacity: 1;
      border-radius: 8px;
    }
    .password {
      width: 4.32rem;
      height: 0.7rem;
      background: rgba(247, 248, 252, 1);
      opacity: 1;
      border-radius: 8px;
      .rcode {
        cursor: pointer;
        margin-right: 0.08rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.4rem;
        height: 0.54rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        background: #16dbcc;
        opacity: 0.5;
        border-radius: 6px;
      }
    }
    .clear {
      cursor: pointer;
      margin-right: 0.2rem;
      width: 0.24rem;
      height: 0.24rem;
      background-image: url("../../../assets/images/组 19@2x.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    .success {
      width: 8rem;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      .top {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .examine {
          flex: 1;
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-items: center;
          > img {
            width: 0.4rem;
            height: 0.4rem;
          }
          > p {
            margin: 0.27rem 0 0.1remx;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 600;
            line-height: 0.33rem;
            color: rgba(78, 92, 101, 1);
            opacity: 1;
          }
          > span {
            font-size: 0.16rem;
            font-family: SF UI Display;
            font-weight: 400;
            line-height: 0.19rem;
            color: rgba(148, 157, 162, 1);
            opacity: 1;
          }
        }
        .line-list {
          width: 100%;
          position: absolute;
          padding: 0 1.7rem;
          height: 0.55rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .line {
            width: 1.75rem;
            height: 0.04rem;
            background: rgba(220, 250, 248, 1);
            opacity: 1;
            border-radius: 2px;
          }
          .block {
            margin: 0 0.25rem;
            width: 0.55rem;
            height: 0.55rem;
          }
          .line2 {
            width: 1.75rem;
            height: 0.04rem;
            background: #ecedf1;
            opacity: 1;
            border-radius: 2px;
          }
        }
      }
    }
    .submit {
      cursor: pointer;
      margin: 0.5rem 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 4.32rem;
      height: 0.7rem;
      font-size: 0.24rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      background: rgba(22, 219, 204, 1);
      box-shadow: 0px 0.1rem 0.25rem rgba(22, 219, 204, 0.15);
      opacity: 1;
      border-radius: 8px;
      transition: all 0.7s;
    }
    .yy {
      margin-top: 0.4rem;
      display: flex;
      > span {
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(179, 185, 199, 1);
        opacity: 1;
      }
      > div {
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 0.26rem;
        color: rgba(78, 92, 101, 1);
        opacity: 1;
      }
    }
  }
  /deep/.el-form-item {
    margin-bottom: 16px;
  }
  /deep/.el-input {
    width: 90%;
  }
  .phone /deep/.el-input__inner,
  .success /deep/.el-input__inner {
    height: 0.7rem;
    font-size: 0.24rem;
    font-family: SF UI Display;
    font-weight: bold;
    color: rgba(78, 92, 101, 1);
    background: rgba(247, 248, 252, 1);
    opacity: 1;
    border: none;
    border-radius: 0.08rem;
    &::-webkit-input-placeholder {
      /* WebKit browsers */
      font-size: 0.2rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(217, 220, 227, 1);
    }
  }
}
</style>
